<script setup>
import inputBox from './inputBox.vue';

defineEmits(['delete'])
const options = [
  {
    value: 'adj.',
    label: 'adj.',
  },
  {
    value: 'adv.',
    label: 'adv.',
  },
  {
    value: 'n.',
    label: 'n.',
  },
  {
    // 冠词
    value: 'art.',
    label: 'art.',
  },
  {
    value: 'v.',
    label: 'v.',
  },
  {
    // 介词
    value: 'prep.',
    label: 'prep.',
  },
  {
    // 连词
    value: 'conj.',
    label: 'conj.',
  },
  {
    // 代词
    value: 'pron.',
    label: 'pron.',
  }
]

const model = defineModel({
  type: Object,
  default: () => ({ type: '', translation: '', remark: '' })
});

</script>
<template>
  <div class="type-in-box">
    <h3 class="inside-title">类型：</h3>
    <el-select v-model="model.type" clearable placeholder="请选择单词类型" style="width: 10vw">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        <span style="float: left">{{ item.label }}</span>
        <span style="float: right;color: var(--el-text-color-secondary);font-size: 13px;">
          {{ item.value }}
        </span>
      </el-option>
    </el-select>
    <h3 class="inside-title">释义：</h3>
    <inputBox placeholder="请输入释义" class="inputBox-outer" v-model="model.translation"></inputBox>
    <h3 class="inside-title">备注：</h3>
    <inputBox placeholder="请输入备注" class="inputBox-outer" v-model="model.remark"></inputBox>
    <button class="delete-button" @click="$emit('delete')">删除</button>
  </div>
</template>
<style scoped lang="scss">
.type-in-box {
  position: relative;
  height: 10vh;
  width: 98%;
  left: 1%;
  margin-top: 2vh;
  border-radius: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  box-shadow: #000000 0px 2px 7px -5px;
}

.inside-title {
  position: relative;
  user-select: none;
  width: 5vw;
  left: 1%;
  font-size: 1.5rem;
}

.inputBox-outer {
  position: relative;
  margin-right: 2vw;
}

.delete-button {
  position: absolute;
  width: 6%;
  left: 93%;
  height: 3.5vh;
  background-color: #FFC7D4;
  font-size: 0.9rem;
  font-weight: 600;
  color: #ffffff;

  border: {
    style: none;
    radius: 8px;
  }
}
</style>
